<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易考拉固定定位</title>
  </head>
  <style>
    .fixed-box {
      width: 80px;
      height: 320px;
      border: 1px solid #eaeaea;
      position: fixed;
      right: 20px;
      top: 200px;
      text-align: center;
      font-size: 14px;
      /* line-height: 80px; */
    }

    .fixed-box a {
      display: block;
      text-decoration: none;
      height: 80px;
      border-bottom: 1px solid #eaeaea;
    }

    .fixed-box a:last-child {
      border-bottom: none;
    }

    .fixed-box a>span {}

    .fixed-box a>i {
      display: block;
      width: 20px;
      height: 20px;
      /* background-color: red; */
      margin: 0 auto 0;
      padding-top: 20px;
    }

    .fixed-box a:first-child:hover {
      background-image: url("img/icon-aside-right-signin-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }

    .fixed-box a:nth-child(2):hover {
      background-image: url("./img/icon-aside-right-cart-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }

    .fixed-box a:nth-child(3):hover {
      background-image: url("./img/icon-aside-right-phone-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }

    .fixed-box a:last-child:hover {
      background-image: url("./img/icon-aside-right-top-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }
  </style>

  <body>
    <div class="fixed-box">
      <a href=""><i><img src="./img/icon-aside-right-signin.png" alt=""></i><span>签到</span></a>
      <a href=""><i><img src="./img/icon-aside-right-cart.png" alt=""></i><span>购物车</span></a>
      <a href=""><i><img src="./img/icon-aside-right-phone.png" alt=""></i><span>APP</span></a>
      <a href=""><i><img src="./img/icon-aside-right-top.png" alt=""></i><span>Top</span></a>
    </div>
  </body>

</html>